<template>
    <div>
        <!--        车辆信息-->
        <!--        <input type="text" id="input_id">-->
        <!--        <div id="main" ref="myCharts" style="width: 1000px;height: 1000px;"></div>-->
        <div id="container"></div>
        <div>
            <img src="../../assets/image/truck.png" alt="">
        </div>
        <el-button type="danger" style="position: absolute;top:130px;left: 240px" @click="startAnimation()">回放轨迹</el-button>
    </div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    // import truckImg from '../../assets/image/truckSmall.png'
    export default {
        data() {
            return {
                marker: null,
                lineArr: [
                    [ 122.227274,40.650901],
                    [ 122.226274,40.650901],
                    [ 122.225274,40.650901],
                    [ 122.224274,40.650901],
                    [ 122.223274,40.650901],
                    [ 122.222274,40.650901],
                    [ 122.212274,40.650901],
                    [122.211854,40.650754],
                    [ 122.2118,40.652603 ],
                    [ 122.21224,40.652504 ]
                ],
                map: null
            }
        },
        methods: {
            mapInit(){
                let _this = this
                AMapLoader.load({
                    "key": "607839a0bcc061d8f61c5fe3ab4b8664",   // 申请好的Web端开发者Key，首次调用 load 时必填
                    // "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": ['AMap.ToolBar', 'AMap.Scale', 'AMap.Autocomplete', 'AMap.PlaceSearch']  //插件列表
                }).then((AMap)=>{
                    this.map = new AMap.Map('container', {
                        center: [122.227597,40.650903],
                        zoom: 15,
                        resizeEnable: true,
                        rotateEnable:true,
                        pitchEnable:true,
                        pitch:10,
                        rotation:-15,
                        viewMode:'3D',//开启3D视图,默认为关闭
                        buildingAnimation:true,//楼块出现是否带动画

                        expandZoomRange:true,
                        zooms:[3,17],
                    });
                    var clickHandler = function(e) {
                        alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
                    };
                    this.map.on('click', clickHandler);
                    console.log(this)
                    this.marker = new AMap.Marker({
                        map: this.map,
                        position: [122.227597,40.650903],
                        icon: "https://webapi.amap.com/images/car.png",
                        // icon: truckImg,
                        offset: new AMap.Pixel(-26, -13),
                        autoRotation: true,
                        angle:170,
                    });
                    // 绘制轨迹
                    let polyline = new AMap.Polyline({
                        map: this.map,
                        path: _this.lineArr,
                        showDir:true,
                        strokeColor: "#28F",  //线颜色
                        // strokeOpacity: 1,     //线透明度
                        strokeWeight: 6,      //线宽
                        // strokeStyle: "solid"  //线样式
                    });
                    console.log(this.lineArr, polyline);
                    var passedPolyline = new AMap.Polyline({
                        map: this.map,
                        // path: lineArr,
                        strokeColor: "#AF5",  //线颜色
                        // strokeOpacity: 1,     //线透明度
                        strokeWeight: 6,      //线宽
                        // strokeStyle: "solid"  //线样式
                    });
                    this.marker.on('moving', function (e) {
                        passedPolyline.setPath(e.passedPath);
                    });
                    // this.marker.setAnimation('AMAP_ANIMATION_BOUNCE');
                    this.map.setFitView();
                }).catch(e => {
                    console.log(e);
                })
            },
            startAnimation () {
                this.marker.moveAlong(this.lineArr, 2000);
            }
        },
        mounted() {
            this.mapInit()
        }
    }
</script>
<style>
    #container {width:100%; height: 600px; }
</style>

<!--<script>-->
<!--    amap 点击确定经纬度坐标-->
<!--    var clickHandler = function(e) {-->
<!--        alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');-->
<!--    };-->
<!--    map.on('click', clickHandler);-->
<!--</script>-->